<template>
  <div>
    <van-form @submit="onSubmit">
      <!-- 基本信息 -->
      <FormTitle title="基本信息"></FormTitle>
      <van-cell-group>
        <van-field
          v-model="baseForm.title"
          name="标题"
          label="标题"
          placeholder="请输入标题"
          input-align="right"
        />
        <van-field
          v-model="baseForm.houseSource"
          name="房源描述"
          label="房源描述"
          placeholder="请输入房源描述"
          input-align="right"
        />
        <van-field
          v-model="baseForm.name"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          input-align="right"
        />
        <van-field
          v-model="baseForm.phone"
          name="联系方式"
          label="联系方式"
          placeholder="请输入联系方式"
          input-align="right"
        />
        <van-field
          v-model="baseForm.houseType"
          name="户型"
          label="户型"
          placeholder="请输入户型"
          input-align="right"
        />
        <van-field
          v-model="baseForm.area"
          name="面积"
          label="面积"
          placeholder="请输入面积"
          input-align="right"
        />
        <van-field
          v-model="baseForm.payMehod"
          name="付款方式"
          label="付款方式"
          placeholder="请输入付款方式"
          input-align="right"
        />
        <van-field
          v-model="baseForm.community"
          name="小区"
          label="小区"
          placeholder="请输入小区"
          input-align="right"
        />
        <van-field
          v-model="baseForm.address"
          name="地址详情"
          label="地址详情"
          placeholder="请输入地址详情"
          input-align="right"
        />
        <van-field
          v-model="baseForm.isCZ"
          name="是否出租"
          label="是否出租"
          placeholder="是/否"
          input-align="right"
        />
      </van-cell-group>

      <!-- 备注 -->
      <van-cell-group class="mt-10">
        <van-field
          v-model="baseForm.remarks"
          label-align="top"
          rows="2"
          autosize
          label="备注信息"
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>
      <van-cell-group class="mt-10">
        <van-field required name="uploader" label="上传图片" label-align="top">
          <template #input>
            <van-uploader v-model="baseForm.imgs" :after-read="afterRead" @delete="deleteImg" />
          </template>
        </van-field>
      </van-cell-group>
      <div class="dvc"></div>
      <div class="bottomButton">
        <van-button round block type="primary" native-type="submit" @click="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import api from "@/api/house.js";
import rentalApi from "@/api/rental.js";
import FormTitle from "@/components/formTitle/index.vue";
import { showToast } from "vant";
const route = useRoute();
const router = useRouter();
// 表单数据
const infoForm = ref({
  result: "",
  updata1: [],
})    
// 表单内容
const baseForm = reactive({
  title: "",
  houseSource: "",
  name: "",
  phone: "",
  houseType: "",
  area: "",
  payMehod: "",
  community: "",
  address: "",
  isCZ: "",
  remarks: "",
  imgs: [],
  images: []
})
const submit = async () => {
  console.log('--baseForm--', baseForm)
  let params = {
    rentId: route.query.rentId,
    title: baseForm.title,
    propertyDescription: baseForm.houseSource,
    name: baseForm.name,
    phone: baseForm.phone,
    houseType: baseForm.houseType,
    area: baseForm.area,
    payWay: baseForm.payMehod,
    community: baseForm.community,
    address: baseForm.address,
    remakes: baseForm.remarks,
    img: baseForm.images.join(","),
  }
  let res = await api.updateRent(params)
  // console.log("---res---", res);
  if (res.data.code == 200 && res.data.msg == "操作成功") {
    showToast("提交成功")
    setTimeout(() => {
      router.back()
    }, 1500)
  }
}
const afterRead = (file) => {
  console.log("file", file);

  file.status = "uploading"
  file.message = "上传中..."

  const formData = new FormData();
  formData.append("file", file.file);

  api.uploadImage(formData).then((res) => {
    console.log('--图片上传--', res);
    if (res.data.code == 200 && res.data.msg == "操作成功") {
      baseForm.images.push(res.data.fileName)
    }
  })

  setTimeout(() => {
    file.status = "done";
    file.message = "上传成功";
  }, 1000)
}
const deleteImg = () => {
  console.log('删除图片');
}
onMounted(async () => {
  const res = await rentalApi.getHouseDetail(route.query.rentId);
  console.log('--res--', res);
  if (res.data.code == 200 && res.data.msg == "操作成功") {
    baseForm.title = res.data.data.title;
    baseForm.houseSource = res.data.data.propertyDescription;
    baseForm.name = res.data.data.name;
    baseForm.phone = res.data.data.phone;
    baseForm.houseType = res.data.data.houseType;
    baseForm.area = res.data.data.area;
    baseForm.payMehod = res.data.data.payWay;
    baseForm.community = res.data.data.community;
    baseForm.address = res.data.data.address;
    baseForm.remakes = res.data.data.remakes;
    baseForm.imgs = res.data.data.img == '' ? '' : res.data.data.img.split(',').map(item => {
      item = {
        url: 'http://192.168.3.63:8085' + item
      }
      return item;
    })
    // console.log('baseForm.imgs', baseForm.imgs);
  }
})
</script>

<style lang="scss" scoped>
.dvc {
  height: 70px;
}
</style>
